<template>
  <scroll-view scroll-y="true" class="scroll-container">
    <!-- 1. 泉州风光（轮播图） -->
    <view class="module-box">
      <view class="module-title">泉州风光</view>
      <swiper
        indicator-dots="true"
        autoplay="true"
        interval="3000"
        duration="500"
        class="banner-swiper"
      >
        <swiper-item>
          <image src="/static/city1.png" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city2.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city3.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city4.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
        <swiper-item>
          <image src="/static/city5.jpg" mode="aspectFill" class="banner-img" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 泉州介绍（富文本） -->
    <view class="module-box">
      <view class="module-title">泉州介绍</view>
      <div class="rich-text" v-html="cityIntro"></div>
    </view>

    <!-- 3. 探索进度 -->
    <view class="module-box">
      <view class="module-title">探索进度</view>
      <progress :percent="60" show-info stroke-width="6" class="progress-bar" />
    </view>

    <!-- 4. 选择城市 -->
    <view class="module-box">
      <view class="module-title">选择城市</view>
      <!-- UniApp 原生三级联动选择器 -->
      <picker
        mode="region"
        :value="region"
        @change="onRegionChange"
        class="picker"
      >
        <view class="picker-text">{{ region[0] }} - {{ region[1] }} - {{ region[2] }}</view>
      </picker>
    </view>

    <!-- 5. 偏好设置 -->
    <view class="module-box">
      <view class="module-title">偏好设置</view>
      <!-- 出行方式 -->
      <div class="preference-item">
        <span>出行方式：</span>
        <radio-group @change="handleTravelModeChange" class="radio-group">
          <label class="radio-label">
            <radio value="bus" :checked="travelMode === 'bus'" />公交
          </label>
          <label class="radio-label">
            <radio value="drive" :checked="travelMode === 'drive'" />自驾
          </label>
          <label class="radio-label">
            <radio value="walk" :checked="travelMode === 'walk'" />步行
          </label>
        </radio-group>
      </div>
      <!-- 显示推荐景点 -->
      <div class="preference-item">
        <span>显示推荐景点：</span>
        <switch :checked="showRecommend" @change="handleShowRecommendChange" />
      </div>
      <!-- 探索半径 -->
      <div class="preference-item">
        <span>探索半径：{{ radius }}km</span>
        <slider :value="radius" :min="1" :max="20" @change="handleRadiusChange" class="slider" />
      </div>
    </view>

    <!-- 6. 泉州宣传（视频） -->
    <view class="module-box">
      <view class="module-title">泉州宣传</view>
      <view class="media-item">
        <video
          src="/static/city-video.mp4"
          controls
          poster="/static/video-poster.jpg"
          class="video-player"
        ></video>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cityIntro: `
        <h4>海上丝绸之路起点 - 泉州</h4>
        <p>历史文化：<strong>泉州</strong>是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有<span style="color: #007AFF;">南音</span>、<span style="color: #007AFF;">木偶戏</span>和闽南建筑等丰富的非物质文化遗产。</p>
      `,
      region: ["当前选择:福建省", "泉州市", "丰泽区"],
      travelMode: "bus",
      showRecommend: true,
      radius: 10 // 补充缺失的 radius 初始值
    };
  },
  methods: {
    // 城市选择变更
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    // 出行方式变更
    handleTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    // 显示推荐景点开关变更
    handleShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块变更（补充缺失的方法）
    handleRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
/* 滚动容器 */
.scroll-container {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  padding: 15rpx;
  box-sizing: border-box;
}

/* 模块通用样式 */
.module-box {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 模块标题 */
.module-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
}

/* 轮播图 */
.banner-swiper {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
}

/* 富文本 */
.rich-text {
  line-height: 1.8;
  color: #666;
  font-size: 28rpx;
}
.rich-text h4 {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}
.rich-text strong {
  color: #333;
}

/* 进度条 */
.progress-bar {
  width: 100%;
  margin-top: 10rpx;
}

/* 城市选择器 */
.picker {
  width: 100%;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
}

/* 偏好设置 */
.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  font-size: 28rpx;
}
.preference-item:last-child {
  margin-bottom: 0;
}
.preference-item span {
  width: 200rpx;
  color: #666;
}
.radio-group {
  display: flex;
  gap: 30rpx;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.slider {
  flex: 1;
  margin-left: 20rpx;
}

/* 宣传视频 */
.media-item {
  margin-bottom: 25rpx;
}
.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
}
</style>